<template lang="html">
    <div class="scheduling-apply">
        <nav-header></nav-header>
        <div class="zh-table">
        <div class="zh-table-open clear">
                    <div class="zh-open-left fl">
            <div class="open-width" style="width: 100px">
                <el-select v-model="status" filterable placeholder="选择状态">
                    <el-option label="全部状态" :value="0"></el-option>
                    <el-option label="已通过" :value="1"></el-option>
                    <el-option label="未审核" :value="2"></el-option>
                    <el-option label="已拒绝" :value="3"></el-option>
                    <!-- <el-option label="已过期" :value="4"></el-option> -->
                </el-select>
            </div>
                        <div class="open-width">
                            <el-input placeholder="学校 授课讲师" v-model="teacher_name" @keyup.enter.native="search"></el-input>
                        </div>
                        <el-button type="primary" @click="search">搜索</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </div>
                </div>
        <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                    <el-table
                        :data="listData"
                        border
                        max-height="541"
                        style="width: 100%">
                <el-table-column
                fixed
                        label="序号"
                type="index"
                        align="center"
                width="50"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column
                        prop="teaching_type"
                        label="课型"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="name"
                        label="公开课名称"
                        align="center"
                width="200"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                        prop="user_name"
                        label="授课教师"
                        align="center"
                        show-overflow-tooltip
                        >
                        </el-table-column>
                <el-table-column
                prop="start_time"
                label="直播时间"
                align="center"
                width="300"
                show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{scope.row.start_time}} -- {{scope.row.end_time}}
                    </template>
                </el-table-column>
                <el-table-column
                prop="recorder_name"
                label="直播设备"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="create_time"
                label="申请时间"
                align="center"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                prop="statusTxt"
                label="状态"
                align="center"
                width="50"
                show-overflow-tooltip
                >
                </el-table-column>
                <el-table-column
                fixed="right"
                prop="handle"
                label="操作"
                align="center"
                width="300"
                show-overflow-tooltip
                >
                <template slot-scope="scope">
                    <el-button type="text" @click="tolink('/teaching/scheduling/scheduling-check?type=details&id=' + scope.row.id)">详情</el-button>
                    <el-button type="text" v-if="scope.row.status === 2 && scope.row.live_status !== 4" @click="tolink('/teaching/scheduling/scheduling-check?type=check&id=' + scope.row.id)">审核</el-button>
                    <el-button type="text" v-if="scope.row.status === 3" @click="rejectReasonShow(scope.row)">拒绝理由</el-button>
                    <!-- <el-button type="text" class="delete-button" @click="rejectWrite = true">拒绝</el-button> -->
                    <el-button type="text" class="delete-button" @click="del(scope.row)">删除</el-button>
                </template>
                </el-table-column>
                    </el-table>
                    <div class="table-pagination" v-show="total_number > 10">
                        <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="listParam.page_index"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            :page-size="listParam.page_size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total_number">
                        </el-pagination>
                    </div>
                </div>
        </div>
        <el-dialog
        title="拒绝理由"
        :visible.sync="rejectReason"
        :close-on-click-modal="false" 
        :close-on-press-escape="false"
        width="30%"
        >
        <div class="textarea-box" >{{rejectReasonTxt}}</div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="rejectReason = false">取 消</el-button>
            <el-button type="primary" @click="rejectReason = false">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
    data() {
        return {
        loading:{
                status:false,
                txt:'获取数据...',
            },
        rejectWrite: false,
        rejectReason: false,
        rejectReasonTxt: '',
        listData: [],
        listParam: {
            status: 0,
            teacher_name: '',
            page_index: 1,
            page_size: 10,
        },
        status: 0,
        teacher_name: '',
        total_number: 0
        }
    },
    mounted() {},
    created() {
        this.getList()
    },
    methods: {
        getList() {
        this.loading.status = true;
        let params = this.listParam;
        const success=res=> {
            this.loading.status = false;
            this.listData = res.data.data;
            this.total_number = res.data.data_sum;
            this.listData.forEach(ele => {
            if(Object.is(ele.status,1)) {
                ele.statusTxt = '已通过';
            }
            if(Object.is(ele.status,2)) {
                ele.statusTxt = '未审核';
                if(Object.is(ele.live_status,4)) {
                ele.statusTxt = '已失效';
                }
            }
            if(Object.is(ele.status,3)) {
                ele.statusTxt = '已拒绝';
            }
            if(Object.is(ele.status,4)) {
                ele.statusTxt = '已撤销';
            }
            if(Object.is(ele.teaching_type,1)) {
                ele.teaching_type = '新授课';
            }
            if(Object.is(ele.teaching_type,2)) {
                ele.teaching_type = '复习课';
            }
            if(Object.is(ele.teaching_type,3)) {
                ele.teaching_type = '讲评课';
            }
            if(Object.is(ele.teaching_type,4)) {
                ele.teaching_type = '主题活动课';
            }
            ele.grade_name = ele.study_section_name+'>'+ele.grade_name+'>'+ele.subject_name;
            })
        }
        this.$ajax.get('api/teachingschedule/auth_schedule_list',{params: params, func: {success: success}})
        },
        search() {
        this.listParam.status = this.status;
        this.listParam.teacher_name = this.teacher_name;
        this.listParam.page_index = 1;
        this.getList();
        },
        reset() {
        this.status = 0;
        this.teacher_name = '';
        this.listParam = {
            status: 0,
            teacher_name: '',
            page_index: 1,
            page_size: 10,
        }
        this.getList();
        },
        handleSizeChange(size) {
        this.listParam.page_size = size;
        this.getList();
        },
        handleCurrentChange(page) {
        this.listParam.page_index = page;
        this.getList();
        },
        tolink(link) {
        this.$router.push(link);
        },
        rejectReasonShow(data) {
        this.rejectReasonTxt = data.comment;
        this.rejectReason = true;
        },
        delFun(id) {
        let params = {
            schedule_id: id
        }
        const success=res=>{
            this.$message({
                type: 'success',
                message: res.msg
            });

            if (this.listData.length - 1 === 0) {
                if (this.listParam.page_index > 1) {
                    this.listParam.page_index-- ;
                } else {
                    this.listParam.page_index = 1;
                }
            }

            this.getList();
        }
        this.$ajax.delete('api/teachingschedule/teaching_schedule_auth',{params:params,func:{success:success}})
        },
        del(obj) {
        this.$confirm('是否删除该记录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            this.delFun(obj.id);
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
        }
    },
    }
</script>

<style lang="scss">
    .scheduling-apply {
        .textarea-box {        
            position: relative;
            padding: 10px 0 25px;
            word-break: break-all;
            word-wrap: break-word;

            .el-textarea__inner {
                min-height: 80px !important;
                resize: none;
            }

            .str-num {
                position: absolute;
                padding: 0;
                margin: 0;
                left: 0;
                bottom: 5px;
                right: 15px;
                text-align: right;

                .str-max {
                    color: #ddd;
                }
            }
        }
    }
</style>
